<template>
  <div
    class="tabs-item"
    :class="{'is-active': propActive}"
    @click="$emit('click')"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "TabsItem",
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      propActive: this.isActive
    };
  },
  watch: {
    isActive(v) {
      this.propActive = v;
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/assets/scss/color";
.tabs-item {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
  cursor: pointer;
  &:not(:first-child) {
    margin-left: 20px;
  }
  &.is-active {
    position: relative;
    color: $--text-high;
    &::after {
      content: " ";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: $--text-high;
    }
  }
}
</style>